<template>
  <div class="hot-topic" @click="topicTodetail(tabId,topicItem)">
      <div><img v-lazy="topicimg" class="hot-topic-img"></div>
      <div class="focusstyle">
        <div class="yl-2gz focusheart"></div>
        <div class="focusnum">{{followNumber}}人关注</div>
      </div>
      <div class="norectopictitle">{{title}}</div>
      <div class="norectopicdes">{{abbreviations}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ['topictype','followNumber','title','abbreviations','topicimg',"tabId","topicItem"],
  methods: {
     topicTodetail(tabId,topicItem){
          this.$emit("topicback",{tabId:tabId,topicItem:topicItem}) 
      }
  },
  mounted() {
    //        console.log(this.isup)
  },
  watch: {}
};
</script>
<style lang="less" scoped>

.hot-topic {
  width: 4.3rem;
  height: 3.2rem;
  overflow: hidden;
  position: relative;
  background: #ffffff;
  vertical-align: top;
  display: inline-block;
  border-radius: 10px
}
.hot-topic-img {
  width: 4rem;
  height: 2.03rem;
  position: absolute;
  top: 36%;
  left: 50%;
  border-radius: 0.1rem;
  transform: translate(-50%, -50%);
}
.focusstyle{
  display: flex;
  position: absolute;
  height: 0.36rem;
  bottom: 1.1rem;
  right: 0.3rem;
}
.focusnum {
  position: relative;
  font-size: 0.22rem;
  color: #fff;
  line-height: 0.31rem;
  font-family: PingFangSC-Regular, sans-serif;
}
.focusheart{
  color: #ffffff;
  position: relative;
  line-height: 0.32rem;
  font-size: 0.24rem
}
.norectopictitle {
  font-family: PingFangSC-Regular, sans-serif;
  max-width: 4rem;
  position: absolute;
  top: 0.85rem;
  left: 0.15rem;
  font-size: 0.3rem;
  color: #333333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.norectopicdes {
  max-width: 4rem;
  font-family: PingFangSC-Regular, sans-serif;
  position: absolute;
  top: 1.25rem;
  left: 0.15rem;
  font-size: 0.22rem;
  color: #6e6e6e;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
